<template>
  <div class="zhuCe_place" @keyup="shuju()">
    <div class="phone">
      <span class="hao">+86</span>
      <input type="search" placeholder="请输入手机号/账号" class="number" v-model="name"/>
    </div>
    <div class="yanZhengMa">
      <input type="text" placeholder="验证码(功能未上线)" />
      <span class="getMa">获取验证码</span>
    </div>
    <div class="pwd">
      <input type="password" placeholder="设置密码" v-model="pwd"/>
      <span class="iconfont icon-bukejian" @click="show($event)"></span>
    </div>
    <div class="rePwd">
      <input type="password" placeholder="确认密码" v-model="rPwd"/>
      <span class="iconfont icon-bukejian" @click="show($event)"></span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:'',
      pwd:'',
      rPwd:''
    }
  },
  methods: {
    show(e){
      // console.log(e.target.previousElementSibling);
      if(e.target.classList.contains('icon-bukejian')){
        //密码可见
        e.target.classList.remove('icon-bukejian');
        e.target.classList.add('icon-kejian');    
        e.target.previousElementSibling.type = 'text';    
      }
      else{
        //密码不可见
        e.target.classList.remove('icon-kejian');
        e.target.classList.add('icon-bukejian'); 
        e.target.previousElementSibling.type = 'password';
      }

    },
    shuju(){
      console.log("用户名："+this.name);
      console.log("密码："+this.pwd);
      console.log("重置密码："+this.rPwd);
      this.$emit("shuju",{name:this.name,pwd:this.pwd,rPwd:this.rPwd});
    }
  },
}
</script>

<style scoped>
.zhuCe_place {
  height: 1.3rem;
  /* background-color: aqua; */
  padding: 0 0.15rem;
}
.zhuCe_place .phone {
  height: 0.65rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  /* line-height: 0.65rem; */
  display: flex;
  align-items: center;
}
.zhuCe_place .phone .hao{
  height: .2rem;
  padding-right: .25rem;
  border-right: 1px solid rgb(225, 225, 225);
  font-size: .18rem;
}
.zhuCe_place .phone .number{
  height: .2rem;
}
.zhuCe_place .yanZhengMa {
  height: 0.65rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zhuCe_place .yanZhengMa .getMa {
  height: .2rem;
  font-size: .18rem;
  color: rgb(155,155,155);
}
.zhuCe_place .pwd,.zhuCe_place .rePwd{
  height: 0.65rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  line-height: 0.65rem;
  position: relative;
}
.zhuCe_place input {
  height: 0.3rem;
  font-size: 0.18rem;
  width: 2rem;
}
.icon-bukejian,
.icon-kejian {
  font-size: 0.2rem;
  position: absolute;
  right: 0.1rem;
}

</style>